<template>
  <div class="box-container">
    <search-box placeholder="请输入搜索内容" />
    <add-btn text="添加商品" />
    <goods-table :goods-list="goodsList" />
    <pagination
      :page-sizes="pageSizes"
      :page-data="pageData"
      :total="total"
      @page-change="loadGoodsList"
    />
  </div>
</template>

<script>
import { getGoodsList } from '@/api/goods'
import SearchBox from '@/components/SearchBox'
import Pagination from '@/components/Pagination'
import AddBtn from '@/components/AddBtn'
import GoodsTable from './components/GoodsTable.vue'
export default {
  name: 'Goods',
  components: {
    Pagination,
    SearchBox,
    AddBtn,
    GoodsTable
  },
  data() {
    return {
      pageSizes: [5, 10, 15, 20],
      pageData: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      // 存储商品列表数据
      goodsList: []
    }
  },
  created() {
    this.loadGoodsList()
  },

  methods: {
    // 加载商品列表数据
    async loadGoodsList() {
      const res = await getGoodsList(this.pageData)
      this.goodsList = res.goods
      this.total = res.total
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
